<template>
	<view class="uni_box home">
		<navbar :invite_code="invite_code" title='商品详情' v-if="ishead">
		</navbar>
		<view class="wrap">
			<view class="swnav" v-if="!ishead" :style="{top: titleTop + 'px'}">
				<image class="back" src="@/pages_client/static/img/back.png" @click="getfan" />
			</view>
			<u-swiper :list="swlist" height="750" @click="getswiper"></u-swiper>
		</view>
		<view class="content">
			<view class="shone">
				<view class="jiaview">
					<text class="jia">￥<text class="jianum">{{info.price}}</text></text>
					<text class="yuanjia">￥{{info.oprice}}</text>
				</view>
				<text class="sbti">{{info.title}}</text>
				<view class="bq">
					<text class="bqitem">正品保障</text>
					<text class="bqitem ml">销量 {{info.sales||0}}件</text>
				</view>
			</view>
			<view class="guiview">
				<view class="guiitem" @click="opengou(1)" v-if="info.sku_id!=0">
					<text class="gleft">规格</text>
					<view class="guinav">
						<text class="guiabq">{{info.sku_name}}</text>
					</view>
					<image class="ricon" src="@/pages_client/static/img/ricon.png" />
				</view>
				<view class="guiitem" @click="getdizhi">
					<text class="gleft">地址</text>
					<view class="guinav">
						<div class="dione" v-if="!addressinfo.id">
							<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
							<text class="guiabq">请填写地址</text>
						</div>
						<div class="dione" v-else>
							<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
							<text class="guiabq">{{addressinfo.name+' '+addressinfo.address}}</text>
						</div>
						<text class="xian">现货72小时内发货</text>
					</view>
					<image class="ricon" src="@/pages_client/static/img/ricon.png" />
				</view>
				<view class="guiitem" v-if="info.guarantee">
					<text class="gleft">购物保障</text>
					<view class="guinav">
						<div class="dione">
							<view class="bqbao" v-for="(item,index) in info.guarantee" :key="index">
								<image class="icon_b" src="@/pages_client/static/img/icon_b.png" />
								<text class="guiabq">{{item.name}}</text>
							</view>
							<!-- <image class="icon_b" style="margin-left: 30rpx;" src="@/pages_client/static/img/icon_b.png" />
							<text class="guiabq">送货上门</text> -->
						</div>
					</view>
					<!-- <image class="ricon" src="@/pages_client/static/img/ricon.png" /> -->
				</view>
			</view>
			<!-- <view class="dianpu">
				<view class="dianone">
					<image class="tuimg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
					<view class="shopright">
						<view class="sleft">
							<view class="lone">
								<text class="lname txt">JUVA东方美容医院JUVA东方美容医院JUVA东方美容医院JUVA东方美容医院</text>
								<image class="icon_rz" src="@/pages_client/static/img/icon_rz.png" />
							</view>
							<u-rate size="28" :count="count" v-model="value"></u-rate>
							<view class="tuan">
								<text class="tuang">团购</text>
							</view>
						</view>
						<view class="sright">
							<view class="jindian">进店</view>
						</view>
					</view>
				</view>
				<view class="diantwo">
					<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
					<text class="wentit txt">文化路86—1号</text>
					<image class="icon_xgs" src="@/pages_client/static/img/comm_icon_next.png" />
				</view>
			</view>
			<view class="shiyong">
				<text class="xuzhi">使用须知</text>
				<view class="xuitem">
					<text class="xuname">有效日期</text>
					<text class="xuright">30天</text>
				</view>
				<view class="xuitem">
					<text class="xuname">使用时间</text>
					<text class="xuright">营业时间内可用</text>
				</view>
				<view class="xuitem">
					<text class="xuname">适用规则</text>
					<text class="xuright">规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则</text>
				</view>
			</view> -->

			<view class="sxq" v-if="info.content">
				<text class="xqname">商品详情</text>
				<u-parse class="cont" v-if="info.content" :html="info.content"></u-parse>
			</view>
			<view class="botview" v-if="jinhuo!=1">
				<view class="botleft" @click="gethome">
					<image class="icon_fenxiang" src="@/pages_client/static/img/icon_sy.png" mode="" />
					<text>首页</text>
				</view>
				<view class="botleft">
					<view class="fenview">
						<image class="icon_fenxiang" src="@/pages_client/static/img/icon_fx.png" mode="" />
						<text>分享</text>
					</view>
					<button open-type="share" class="btn"></button>
				</view>
				<view class="liantwo">
					<view class="qubtn" @click="opengou(2)">
						加入购物袋
					</view>
					<view class="qubtn queren" @click="opengou(1)">
						立即购买
					</view>
				</view>
			</view>

			<!-- 确认订单弹窗 -->
			<u-popup  v-model="queshow" mode="bottom" width="100%" :closeable="true"  @close="closeorque">
			  <view class="quepop">
				 <text class="quename">确认信息</text>
				 <view class="shop">
					<image class="shopimg" @click="getyulan(popinfo.image)" :src="popinfo.image"  />
					<view class="shopright">
						<text class="btname txt">{{ popinfo.title }}</text>
						<view class="jiaview">
							<text class="jia">￥<text class="jianum">{{popinfo.price}}</text></text>
							<text class="yuanjia">￥{{popinfo.oprice}}</text>
						</view>
						<text class="kucun">库存  {{popinfo.stocks}}件</text>
					</view>
				 </view>
				 <view class="qukuai" v-if="guiinfo!=''"></view>
				 <view class="guinav" v-for="(item,index) in guiinfo" :key="index" v-if="guiinfo!=''">
					<text class="guiname">{{item.title}}</text>
					<view class="guilist">
						<view class="guiitem" :class="i.select?'gactive':''" v-for="(i,ind) in item.sku_value" :key="ind" @click="getsku(item,i,index,ind)">{{i.title}}</view>
					</view>
				 </view>
				 <view class="qukuai"></view>
				 <view class="gshu">
					<text class="goushuname">数量</text>
					<u-number-box class="ml" v-model="nums" @change="valChange"></u-number-box>
				 </view>
				 <view class="qukuai"></view>
				<view class="goumaibtn" @click="getorder">
					{{ ctype==1?'立即购买':'加入购物车' }}
				</view>
			  </view>
			</u-popup>	
		</view>

		 <nsLogin :loginshow="loginshow" lei="2" :invite_code="invite_code" @saveUserInfo="saveUserInfo"></nsLogin>
	</view>
</template>

<script>
import nsLogin from '@/components/ns-login/ns-login'
	export default {
		components: {
			nsLogin
		},
		data() {
			return {
				swlist: [
					// {
					// 	image: this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png'),
					// 	title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					// },
					// {
					// 	image: this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png'),
					// 	title: "身无彩凤双飞翼，心有灵犀一点通",
					// },
					// {
					// 	image: this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png'),
					// 	title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
					// },
				],
				titleTop: 0,
				content: "<img src="+this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')+"></img>",
				title:'协议',
				key:'',
				queshow:false,//确认购买弹窗
				value: 1,
				type:1,//1商品详情 2门店商品详情
				ishead:false,
				count: 5,
				value: 4,
				info:{},
				guiinfo:[],
				popinfo:{},
				nums:1,
				ctype:1,//1购买 2加入购物车
				goods_sku_id:'',
				addressinfo:{},
				invite_code:'',
				loginshow:false,
				jinhuo:0,//1就是进货来的只让看
				shop_id:'',
				pengyouquan:0
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const { top, height } = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// 计算标题需要偏移的位置
			const titleTop = top + (height - statusBarHeight) / 2;
			this.titleTop = titleTop;//设置标题顶部距离
			this.statusBarHeight = statusBarHeight;//设置状态栏高度
			// #endif
			// #ifdef H5
			this.titleTop = 20;//设置标题顶部距离
			// #endif
		},
		onShareAppMessage(res) {
			uni.compressImage({
				src: this.popinfo.image,
				quality: 80,
				success: res => {
					console.log(res.tempFilePath)
				}
			})
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.info.title,
				// imageUrl:this.popinfo.image,
				path: '/pages_client/twoPage/ShopDetail?id='+this.id+'&invite_code='+this.$store.state.code||uni.getStorageSync('code'),
				query: `id=${this.id}&invite_code=${this.$store.state.code||uni.getStorageSync('code')}`,
			}
		},
		onShareTimeline(){
			return {
				title: this.info.title,
				// imageUrl:this.popinfo.image,
				path: '/pages_client/twoPage/ShopDetail?id='+this.id+'&invite_code='+this.$store.state.code||uni.getStorageSync('code')+'&pengyouquan=1',
				query: `id=${this.id}&invite_code=${this.$store.state.code||uni.getStorageSync('code')}&pengyouquan=1`,
			}
		},
		onLoad(option) {
			if(option.type){
				this.type = option.type
			}
			if(option.id){
				this.id = option.id
			}
			if(option.jinhuo){
				this.jinhuo = option.jinhuo
			}
			if(option.shop_id){//主页进入
				this.shop_id = option.shop_id
			}

			if(option.invite_code){
				this.invite_code = option.invite_code //分享进入
				uni.setStorageSync('invite_code',this.invite_code);
				this.$store.commit('changeinvite_code',this.invite_code);
				// this.getlogin();
			}
			if(option.pengyouquan){
				this.pengyouquan = option.pengyouquan
			}
			this.getDetail()
		},
		onShow() {
			let that = this
			uni.$on('isRefreshadress',function(data){
				that.addressinfo = data
				console.log('监听到事件来自返回的参数：' + JSON.stringify(data));
                // TODO 下面执行刷新的方法
			})
			if(uni.getStorageSync('token')){
				this.getuser()
			}
		},
		methods: {
			async getuser(){
				let res = await this.$u.api.getData({
				});
				if(res.data.id){//本地分享参数缓存
					uni.setStorageSync('code',res.data.id);//2老板
					this.$store.commit('changecode',res.data.id);
				}
			},
			getyulan(e){
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
			async getDetail(){
				let res = await this.$u.api.details({
					id:this.id
				});
				
				this.info = res
				this.addressinfo = res.address
				this.popinfo = res
				if(res.images){
					this.popinfo.image = this.popinfo.images[0]
				}
				let shuzu = []
				for(let i in this.info.images){
					let a = {}
					a.image = this.info.images[i]
					shuzu.push(a)
				}
				
				this.swlist = shuzu

				
			},

			getfan(){
				if(this.invite_code){
					uni.switchTab({ url: '/pages/tabbar/index',animationType:'slide-in-right' })
				}else{
					uni.navigateBack({ delta: 1 })
				}
				
			},
			closeorque(){
				this.queshow = false
			},
			async getLogin(){
				this.loginshow = true
			},
			saveUserInfo(e){
				this.loginshow = false
				this.getDetail()
			},
			async opengou(e){//获取规格
				// if(this.pengyouquan == 1){
				// 	this.$u.toast("点击下方前往小程序即可使用");
				// 	return;
				// }
				if(!uni.getStorageSync('token')||uni.getStorageSync('token')==''){
					//弹出登陆
					// #ifdef MP-WEIXIN
					this.getLogin()
					// #endif
					return;
				}
				this.nums = 1
				this.ctype = e //1购买 2加入购物车
				let res = await this.$u.api.getSkuList({
					id:this.id
				});
				let gui = res
				
				if(gui){
					//默认选中
					
					for(let i in gui){
						for(let j in gui[i].sku_value){
							gui[i].sku_value[j].select = false
						}
						gui[i].sku_value[0].select = true
					}
					this.guiinfo = gui
					this.getjian();//选择规格图片
				}
				this.queshow = true
			},
			async getjian(){
				let gui = this.guiinfo
				let parms = []
				for(let i in gui){
					for(let j in gui[i].sku_value){
						 if(gui[i].sku_value[j].select){
							parms.push(gui[i].sku_value[j].id)
						 }
					}
				}
				this.goods_sku_id = parms.toString()
				let res = await this.$u.api.getSkuInfo({
					sku_id:parms.toString(),
					goods_id:this.id
				});
				const mergedObject = Object.assign({}, this.popinfo, res);
				console.log(mergedObject);
				this.popinfo = mergedObject
				
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			getorder(){
				if(this.ctype == 2){
					//购物车
					this.getaddcart()
				}else {
					console.log(this.goods_sku_id)
					this.queshow = false
					if(this.popinfo.sku_id==''){
						this.navrouter('/pages_client/twoPage/PayOrder?lei=1'+'&goods_sku_id='+'&goods_id='+this.id+'&goods_nums='+this.nums+'&shop_id='+this.shop_id+'&addressinfo_id='+this.addressinfo.id||'')
					}else{
						this.navrouter('/pages_client/twoPage/PayOrder?lei=1'+'&goods_sku_id='+this.popinfo.id+'&goods_id='+this.id+'&goods_nums='+this.nums+this.nums+'&shop_id='+this.shop_id+'&addressinfo_id='+this.addressinfo.id||'')
					}
					
				}
				
			},
			async getaddcart(){
				let goods_sku_id = ''
				if(this.popinfo.sku_id==''){
					goods_sku_id = ''
				}else{
					goods_sku_id = this.popinfo.id
				}
				let res = await this.$u.api.addCart({
					goods_sku_id:goods_sku_id,
					goods_id:this.id
				});
				
				this.$u.toast("操作成功");
				this.queshow = false
			},
			gethome(){
				uni.switchTab({ url: '/pages/tabbar/index' })
			},
			getguige(){
				this.opengou()
			},
			async getsku(item,i,index,ind){
				let guiinfo = this.guiinfo
				let newguiinfo = this.guiinfo[index].sku_value
				for(let i in newguiinfo){
					newguiinfo[i].select = false
				}
				newguiinfo[ind].select = true
				this.guiinfo[index].sku_value = newguiinfo
				console.log(this.guiinfo)
				this.getjian();//选择规格图片

			},
			getcart(){
				//加入购物车
				this.nums = 1
				this.ctype = 2 //1购买 2加入购物车
				this.queshow = true
			},
			getdizhi(){
				if(!uni.getStorageSync('token')||uni.getStorageSync('token')==''){
					//弹出登陆
					// #ifdef MP-WEIXIN
					this.getLogin()
					// #endif
					return;
				}
				this.navrouter('/pages_client/twoPage/Adress?type=fabu')
			},
			getswiper(e){
				let newdata = []
				let shuzu = this.swlist
				for(let i in shuzu){
					newdata.push(shuzu[i].image)
				}

				uni.previewImage({
                    current: this.swlist[e].image, // 当前显示图片的 http 链接
                    urls: newdata // 需要预览的图片 http 链接列表
                });
			}
		},
		onPageScroll(e) {
			// console.log('页面滚动距离:', e.scrollTop);
			// 在这里编写滚动相关的逻辑
			if (e.scrollTop >= 200) {
				this.ishead = true
			} else {
				this.ishead = false
			}
			this.$forceUpdate()
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f9f9f9;
	}
	.swnav{
		position: absolute;
		left: 30rpx;
		z-index: 100;
		.back{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.content{
		background-color: #f9f9f9;
		padding-bottom: 130rpx;
		.shone{
			background: linear-gradient(0deg, #F9F9F9 0%, #FFFFFF 100%);
			// border-radius: 30rpx 30rpx 0rpx 24rpx;
			position: relative;
			padding: 40rpx;
			// margin-top: -30rpx;
			.jia{
				font-weight: bold;
				font-size: 36rpx;
				color: #FF7C41;
			}
			.jianum{
				font-size: 60rpx;
				position: relative;
			}
			.yuanjia{
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				text-decoration: line-through;
				display: inline-block;
				margin-left: 16rpx;
			}
			.sbti{
				display: block;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				margin: 10rpx 0 8px;
			}
			.bq{
				display: flex;
				flex-direction: row;
				align-items: center;
				.bqitem{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
		.guiview{
			
			margin: 15rpx 15rpx 25rpx;
			.guiitem{
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;
				background: #FFFFFF;
				
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.guiitem:last-child{
				border-bottom: none;
			}
			.gactive{
				background: #ECECEC;
				border-radius: 10rpx;
				border: 1px solid #483C38;
			}
			.guiitem:first-child{
				border-radius: 30rpx 30rpx 0rpx 0rpx;
			}
			.guiitem:last-child{
				border-radius:  0rpx 0rpx 30rpx 30rpx;
			}
			.gleft{
				width: 150rpx;
				display: inline-block;
				font-weight: 400;
				font-size: 28rpx;
				color: #808080;
			}
			.guinav{
				display: flex;
				flex-direction: column;
				flex: 1;
				.guiabq{
					font-weight: 500;
					font-size: 28rpx;
					color: #1A1A1A;
				}
				.dione{
					display: flex;
					flex-direction: row;
					align-items: center;
					.bqbao{
						margin-right: 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
					}
					.icon_dw{
						width: 25rpx;
						height: 28rpx;
						margin-right: 6rpx;
					}
					.icon_b{
						width: 27rpx;
						height: 28rpx;
						margin-right: 7rpx;
					}
				}
				.xian{
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					display: block;
					margin-top: 14rpx;
				}
			}
			.ricon{
				width: 20rpx;
				margin-left: auto;
				height: 20rpx;
			}
		}

		.sxq{
			background: #FFFFFF;
			border-radius: 24rpx;
			.xqname{
				font-weight: bold;
				font-size: 32rpx;
				color: #1A1A1A;
				padding: 30rpx 50rpx;
				display: block;
			}
		}
	}
	.dianpu{
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 15rpx 25rpx;
		.dianone{
			display: flex;
			flex-direction: row;
			padding: 25rpx;
			border-bottom: 1rpx solid #eee;
			.tuimg{
				width: 130rpx;
				height: 130rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
			.shopright{
				width: 77%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.sleft{
					display: flex;
					flex-direction: column;
					width: 77%;
					height: 100%;
					.lone{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;
						.lname{
							font-weight: 800;
							font-size: 30rpx;
							color: #111111;
							max-width: 80%;
							display: inline-block;
						}
						.icon_rz{
							margin-left: 9rpx;
							width: 28rpx;
							height: 28rpx;
						}
					}
					.tuan{
						display: flex;
						flex-direction: row;
						margin-top: auto;
					}
					.tuang{
						padding: 2rpx 14rpx;
						background: rgba(254,42,0,0.1);
						border-radius: 5rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FE2A00;
					}
				}
				.sright{
					flex: 1;
					margin-left: auto;
					.jindian{
						width: 120rpx;
						height: 50rpx;
						background: #FF7C41;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.diantwo{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 20rpx;
			.icon_dw{
				width: 18rpx;
				height: 21rpx;
				margin-right: 8rpx;
			}
			.wentit{
				max-width: 60%;
				display: inline-block;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
			.icon_xgs{
				margin-left: auto;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
	
	.shiyong{
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 15rpx 25rpx;
		padding: 30rpx;
		.xuzhi{
			font-weight: bold;
			font-size: 28rpx;
			color: #272727;
			display: block;
			margin-bottom: 30rpx;
		}
		.xuitem{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			.xuname{
				width: 120rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #808080;
				display: block;
				text-align: left;
			}
			.xuright{
				width: 80%;
				font-weight: bold;
				font-size: 24rpx;
				color: #1A1A1A;
			}
		}
		.xuitem:last-child{
			margin-bottom: 0;
		}
	}

	.botview {
	height: 120rpx;
	background: #FFFFFF;
	width: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	position: fixed;
	width: 100%;
	bottom: 0;
	// border-top: 1rpx solid #eee;
	padding: 10rpx 30rpx 20rpx 0;
	.fenview{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.botleft {
		width: 17%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;

		.icon_fenxiang {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 5rpx;
		}

		text {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666;
		}
	}

	.lianxi {
		margin-left: auto;
		width: 75%;
		height: 90rpx;
		background: linear-gradient(90deg, #FF8F39, #FF4D43);
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		.lname {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.lmiao {
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
		}
	}
	.yibao{
		background: #F5F5F5;
		border-radius: 45rpx;
		font-weight: bold;
		font-size: 28rpx;
		.lname{
			color: #333333;
		}
		
	}

	.liantwo {
		display: flex;
		flex-direction: row;
		flex: 1;

		.qubtn {
			height: 90rpx;
			// width: 200rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFA64F;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			// margin: 0 20rpx;
		}

		.queren {
			background: #FF7C41;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			color: #fff;
		}
	}
}

// 确认购买弹窗
.quepop{
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx 0;
	.quename{
		display: block;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #808080;
	}
	.shop{
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		background-color: #fff;

		.shopimg{
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;

		}
		.shopright{
			// flex: 1;
			width: 70%;
			display: flex;
			flex-direction: column;
			padding-bottom: 8rpx;
			.btname{
				display: block;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}
			.jiaview{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.jia{
				font-weight: bold;
				font-size: 32rpx;
				color: #FF7C41;
			}
			.jianum{
				font-size: 50rpx;
				position: relative;
				top: 3rpx;
			}
			.yuanjia{
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				text-decoration: line-through;
				display: inline-block;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
			.kucun{
				margin-top: auto;
				font-weight: 500;
				font-size: 24rpx;
				color: #808080;
			}
		}
	}
	.qukuai{
		background: #F9F9F9;
		height: 20rpx;
		width: 100%;
	}
	.guinav{
		padding: 10rpx 30rpx 0rpx;
		background-color: #fff;
		.guiname{
			font-weight: 500;
			font-size: 30rpx;
			color: #1A1A1A;
			display: block;
			margin-bottom: 24rpx;
		}
	}
	.guilist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.guiitem{
			max-width: 60%;
			padding: 14rpx 30rpx;
			background: #ECECEC;
			border-radius: 10rpx;
			// border: 1px solid #483C38;
			font-weight: 500;
			font-size: 26rpx;
			color: #333;
			margin: 0 30rpx 20rpx 0;
		}
		.gactive{
			// background: #ECECEC;
			background: #FF7C41;
			color: #fff;
			border-radius: 10rpx;
			// border: 1px solid #483C38;
		}
	}
	.gshu{
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		.goushuname{
			font-weight: 500;
			font-size: 30rpx;
			color: #1A1A1A;
		}
	}
	.goumaibtn{
		background: #FF7C41;
		border-radius: 16rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 40rpx 30rpx 10rpx;
	}
}
.btn{
		position: absolute;
		background-color: transparent;
		width: 100%;
		height: 100%;
		z-index: 1;
		left: 0;
		padding: 0;
		border: none !important;
	}
	/deep/ button::after  {
	border: none;
	
}
</style>
